<template>
  <view>
    <view class="full" @click="closeFull"></view>

    <view class="login-out">
      <view
        ><b>{{ title }}</b></view
      >
      <view>作业时间：</view>
      <view class="work-date" @click="showDate(true)"
        >{{ start == "" ? "开始日期" : start
        }}<view class="fr"
          ><image
            src="/static/img/date-icon.png"
            class="work-date-icon"
          ></image></view
      ></view>
      <view class="work-date" @click="showDate(false)"
        >{{ end == "" ? "结束日期" : end
        }}<view class="fr"
          ><image
            src="/static/img/date-icon.png"
            class="work-date-icon"
          ></image></view
      ></view>

      <view
        >施工计划号：
        <u-input
          class="f-opactiy"
          type="text"
          v-model="form.constructPlanSn"
        ></u-input
      ></view>

      <view @click="show.typeWork = true"
        >申请类别：
        <text class="text-load">{{ form.applicationType }}</text></view
      >
      <u-select
        v-model="show.typeWork"
        :list="applicationType"
        label-name="value"
        value-name="value"
        @confirm="handleOk"
        @cancel="handleCacel"
      ></u-select>
      <view @click="show.workTypeflag = true"
        >作业类别： <text class="text-load">{{ form.workType }}</text></view
      >
      <u-select
        v-model="show.workTypeflag"
        :list="workType"
        label-name="value"
        value-name="value"
        @confirm="workTypeOk"
        @cancel="workTypeCancle"
      ></u-select>

      <view @click="show.woState = true" v-if="title == '施工申请查询'"
        >状态： <text class="text-load">{{ form.state }}</text></view
      >
      <u-select
        v-model="show.woState"
        :list="workOrderState"
        label-name="value"
        @confirm="statusHand"
        @cancel="statusCancle"
      ></u-select>

      <view @click="showORG()"
        >机构： <text class="text-load">{{ form.applicationOrg }}</text></view
      >
      <ljs-treeChoose
        :data="departList"
        @getChooseValue="orgchange"
        @close="orgcancle"
        v-if="show.orgShow"
      />
      <!-- <u-select
        v-model="show.orgShow"
        :list="reeByOrgnum"
        label-name="text"
        value-name="orgnum"
        mode="mutil-column-auto"
        @confirm="orgchange"
        @cancel="orgcancle"
      ></u-select> -->
      <view @click="show.lineName = true"
        >线路: <text class="text-load">{{ form.line }}</text></view
      >
      <u-select
        v-model="show.lineName"
        :list="lineTree"
        label-name="name"
        value-name="idK"
        @confirm="handleLine"
        @cancel="cancleLine"
      ></u-select>
      <view @click="show.location = true"
        >车站: <text class="text-load">{{ form.station }}</text></view
      >
      <u-select
        v-model="show.location"
        :list="stationList"
        label-name="name"
        value-name="id"
        @confirm="handleLocation"
        @cancel="cancleLocation"
      ></u-select>
      <view class="btn"
        ><button class="cancel-btn" @click="reset"><b>重置</b></button
        ><button class="default-btn fr" @click="ok"><b>确定</b></button></view
      >
    </view>

    <view class="full full2" v-show="show_date"></view>
    <u-picker
      v-model="show_date"
      mode="time"
      :params="params"
      @confirm="setDate"
      @cancel="cancel"
    ></u-picker>
  </view>
</template>

<script>
import { mapState } from "vuex";
import { PMS_DICT_CONTROLLER } from "../../api/pms";

export default {
  props: ["title", "tab"],
  computed: {
    ...mapState([
      "applicationType",
      "workProfession",
      "lineTree",
      "reeByOrgnum",
      "workType",
    ]),
  },
  watch: {
    tab: {
      handler(val, old) {
        this.start = "";
        this.end = "";
        this.form = {
          line: "",
          station: "",
          applicationType: "", //计划类别
          state: "", // 状态
          constructPlanSn: "", // 施工计划号
          applicationOrg: "",
          startTime: "", // 到期时间开始
          endTime: "", // 到期时间结束
          workType: "",
        };
        this.query = {
          line: "",
          station: "",
          applicationType: "", //计划类别
          state: "", // 状态
          constructPlanSn: "", // 施工计划号
          applicationOrg: "",
          startTime: "", // 到期时间开始
          endTime: "", // 到期时间结束
          workType: "",
        };
        if (val == 0) {
          this.workOrderState = [{ value: "草稿" }, { value: "已提交" }];
        }
        if (val == 1) {
          this.workOrderState = [{ value: "草稿" }];
        }
        if (val == 2) {
          this.workOrderState = [{ value: "已提交" }];
        }
      },
    },
  },
  created() {
    // console.log(this.applicationType);
  },
  data() {
    return {
      departList: [],
      workOrderState: [{ value: "草稿" }, { value: "已提交" }],
      stationList: [],
      params: {
        year: true,
        month: true,
        day: true,
        hour: true,
        minute: true,
        second: true,
      },
      currentDate: new Date(),
      minDate: new Date().getTime(),
      start: "",
      end: "",
      type: "",

      show_date: false,
      form: {
        line: "",
        station: "",
        applicationType: "", //计划类别
        state: "", // 状态
        constructPlanSn: "", // 施工计划号
        applicationOrg: "",
        startTime: "", // 到期时间开始
        endTime: "", // 到期时间结束
        workType: "",
      },
      show: {
        woState: false,
        orgShow: false,
        typeWork: false,
        typeWork1: false,
        lineName: false,
        location: false,
        workTypeflag: false,
      },
      query: {
        line: "",
        station: "",
        applicationType: "", //计划类别
        state: "", // 状态
        constructPlanSn: "", // 施工计划号
        applicationOrg: "",
        startTime: "", // 到期时间开始
        endTime: "", // 到期时间结束
        workType: "",
      },
    };
  },
  methods: {
    showORG() {
      let self = this;
      this.show.orgShow = true;
      self.departList = self.reeByOrgnum.map((org) => self.mapTree(org));
    },
    mapTree(org) {
      const haveChildren =
        Array.isArray(org.children) && org.children.length > 0;
      return {
        id: org.orgnum,
        label: org.text,
        openTag: false,
        choose: false,
        children: haveChildren ? org.children.map((i) => this.mapTree(i)) : [],
      };
    },
    workTypeCancle() {
      this.show.workTypeflag = false;
    },
    workTypeOk(obj) {
      this.form.workType = obj[0].label;
      this.query.workType = obj[0].value;
    },
    statusHand(obj) {
      this.form.state = obj[0].label;
      this.query.state = obj[0].value;
    },
    statusCancle() {
      this.show.woState = false;
    },
    orgchange(org, items) {
      this.form.applicationOrg = items[items.length - 1].label;
      this.query.applicationOrg = items[items.length - 1].id;
      setTimeout(() => {
        this.orgcancle();
      }, 500);
    },
    orgcancle() {
      this.show.orgShow = false;
    },
    handleLocation(obj) {
      this.form.station = obj[0].label;
      this.query.station = obj[0].value;
    },
    cancleLocation() {
      this.show.location = false;
    },
    handleOk(obj) {
      this.form.applicationType = obj[0].label;
      this.query.applicationType = obj[0].value;
    },

    handleCacel() {
      this.show.typeWork = false;
    },
    handleLine(obj) {
      this.form.line = obj[0].label;
      this.query.line = obj[0].value;
      if (this.query.line) {
        this.fetch(
          "get",
          this.$store.state.baseUrl + PMS_DICT_CONTROLLER.GET_NAME_BY_LINEID,
          { lineId: obj[0].value }
        ).then((res) => {
          if (res?.success) {
            this.stationList = res?.data;
          }
        });
      } else {
        this.stationList = [];
      }
    },
    cancleLine() {
      this.show.lineName = false;
    },
    closeFull() {
      // this.reset();
      let obj = {
        ...this.query,
        startTime: this.start,
        endTime: this.end,
        constructPlanSn: this.form.constructPlanSn,
      };
      this.$emit("closeConSearch", obj);
    },
    showDate(bol) {
      this.type = bol;
      this.show_date = true;
    },
    reset() {
      this.stationList = [];
      this.currentDate = new Date();
      this.start = "";
      this.end = "";
      this.type = "";
      this.query = {
        line: "",
        station: "",
        applicationType: "", //计划类别
        // state: "", // 状态
        constructPlanSn: "", // 施工计划号
        applicationOrg: "",
        startTime: "", // 到期时间开始
        endTime: "", // 到期时间结束
        workType: "",
      };
      this.form = {
        line: "",
        station: "",
        applicationType: "", //计划类别
        state: "", // 状态
        constructPlanSn: "", // 施工计划号
        applicationOrg: "",
        startTime: "", // 到期时间开始
        endTime: "", // 到期时间结束
        workType: "",
      };
    },
    cancel() {
      this.show_date = false;
    },
    ok() {
      let obj = {
        ...this.query,
        startTime: this.start,
        endTime: this.end,
        constructPlanSn: this.form.constructPlanSn,
      };
      this.$emit("closeConSearch", obj);
    },
    setDate(obj) {
      let str =
        obj.year +
        "-" +
        obj.month +
        "-" +
        obj.day +
        " " +
        obj.hour +
        ":" +
        obj.minute +
        ":" +
        obj.second;
      this.type ? (this.start = str) : (this.end = str);
      this.cancel();
    },
  },
};
</script>

<style scoped>
.text-load {
  padding: 0 20px;
  height: 45px;
  line-height: 45px;
}
.login-out {
  padding: 26px 0 0 26px;
}
.login-out > view:nth-child(1) {
  color: #3e3a39;
  margin-bottom: 16px;
}
.login-out > view:nth-child(2) {
  color: #3e3a39;
  font-size: 14px;
  margin-bottom: 12px;
}
.work-date {
  line-height: 50px;
  border-bottom: 1px solid #d7d7d7;
  color: #3e3a39;
  font-size: 14px;
  padding-right: 27px;
}
.work-date-icon {
  width: 15px;
  height: 15px;
  vertical-align: middle;
}
.btn {
  position: absolute;
  width: 100%;
  bottom: 5%;
  left: 0;
  padding: 0 15px;
}
.default-btn,
.cancel-btn {
  width: 47%;
  display: inline-block;
}
.full2 {
  z-index: 99;
}
</style>
